<script setup lang="ts">
import NP from 'number-precision';

const count = ref(11.22);
const text = 'CopyButton文本复制';

const value = ref(Date.now() + 1000 * 60 * 60 * 7);
</script>

<template>
  <PageCard title="InputNumber 组件" round>
    <InputNumber v-model="count" :precision="2" :min="0" :max="100" class="w-300px">
      <template #prefix>￥</template>
      <template #suffix>元</template>
      <template #prepend>min0</template>
      <template #append>max100</template>
    </InputNumber>
    <span>
      count: {{ count }} {{ typeof count }}
      <CopyButton :text="count" />
    </span>

    <span class="ml-10">{{ text }}</span>
    <CopyButton :text="text" />

    <SpineText class="ml-10">文字光亮闪过效果</SpineText>

    <router-link
      class="color-primary hover:color-primary"
      :to="{
        name: 'TemplateDetail',
        params: { id: 1 },
      }"
    >
      跳转表单详情
    </router-link>

    <el-countdown title="Start to grab" :value="value" />
  </PageCard>
  <PageCard title="number-precision 四则运算" round>
    <ul>
      <li>import NP from 'number-precision'</li>
      <li>NP.plus(count, 10) = {{ NP.plus(count, 10) }}</li>
      <li>NP.minus(count, 10) = {{ NP.minus(count, 10) }}</li>
      <li>NP.times(count, 10) = {{ NP.times(count, 10) }}</li>
      <li>NP.divide(count, 10) = {{ NP.divide(count, 10) }}</li>
      <li>NP.round(count, 1) = {{ NP.round(count, 1) }}</li>
    </ul>
  </PageCard>
</template>
